<template>
  <view class="container" style="background-color: #f8f8f8;">
    <view class="form">
      <!-- 收货人姓名 -->
      <view class="form-item">
        <text class="label">收货人</text>
        <input 
          class="input" 
          type="text" 
          v-model="formData.name" 
          placeholder="请输入收货人姓名"
        />
      </view>

      <!-- 手机号 -->
      <view class="form-item">
        <text class="label">手机号</text>
        <input 
          class="input" 
          type="number" 
          v-model="formData.phone" 
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>

      <!-- 地址 -->
      <view class="form-item">
        <text class="label">地址</text>
        <input 
          class="input" 
          type="text" 
          v-model="formData.address" 
          placeholder="请输入楼层/栋号"
        />
      </view>

      <!-- 详细地址 -->
      <view class="form-item">
        <text class="label">详细地址</text>
        <input 
          class="input" 
          type="text" 
          v-model="formData.detail" 
          placeholder="请输入门牌号"
        />
      </view>

      <!-- 设为默认地址 -->
      <view class="form-item switch-item">
        <text class="label">设为默认地址</text>
        <switch 
          :checked="formData.isDefault" 
          @change="onSwitchChange"
          color="#FF5733"
        />
      </view>
    </view>

    <!-- 底部按钮组 -->
    <view class="button-group">
      <button class="cancel-btn" @click="cancel">取消</button>
      <button class="save-btn" @click="saveAddress">保存</button>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { reactive } from 'vue'
import { saveAddress as saveUserAddress, getAddressDetail } from '@/api/address.js'

const formData = reactive({
  id: '',
  name: '',
  phone: '',
  address: '',
  detail: '',
  isDefault: false
})

// 区分新增和编辑模式
onLoad((options) => {
  if (options.id) {
    formData.id = options.id
    // 获取地址详情
    getAddressDetail({ id: options.id }).then(res => {
      if (res.code === '0') {
        Object.assign(formData, res.data)
      } else {
        uni.showToast({
          title: res.message || '获取地址详情失败',
          icon: 'none'
        })
      }
    }).catch(err => {
      uni.showToast({
        title: '网络错误，请重试',
        icon: 'none'
      })
    })
  }
})

const onSwitchChange = (e) => {
  formData.isDefault = e.detail.value
}

const cancel = () => {
  uni.navigateBack()
}

const saveAddress = () => {
  // 表单验证
  if (!formData.name) {
    uni.showToast({
      title: '请输入收货人姓名',
      icon: 'none'
    })
    return
  }
  if (!formData.phone) {
    uni.showToast({
      title: '请输入手机号',
      icon: 'none'
    })
    return
  }
  if (!/^1\d{10}$/.test(formData.phone)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }
  if (!formData.address) {
    uni.showToast({
      title: '请输入地址',
      icon: 'none'
    })
    return
  }
  if (!formData.detail) {
    uni.showToast({
      title: '请输入详细地址',
      icon: 'none'
    })
    return
  }

  // 调用接口保存地址
  const params = {
    name: formData.name,
    phone: formData.phone,
    address: formData.address,
    detail: formData.detail,
    isDefault: formData.isDefault
  }
  
  // 根据有无id区分新增或编辑
  if (formData.id) {
    params.id = formData.id
  }
  
  saveUserAddress(params).then(res => {
    if (res.code === '0') {
      uni.showToast({
        title: '地址保存成功',
        icon: 'success'
      })
      // 返回上一页
      uni.navigateBack()
    } else {
      uni.showToast({
        title: res.message || '地址保存失败',
        icon: 'none'
      })
    }
  }).catch(err => {
    uni.showToast({
      title: '网络错误，请重试',
      icon: 'none'
    })
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f0f2f5;
  padding: 20rpx;
}

.form {
  background: #ffffff;
  border-radius: 20rpx;
  padding: 0 30rpx;
}

.form-item {
  display: flex;
  align-items: center;
  min-height: 100rpx;
  border-bottom: 2rpx solid #f0f2f5;

  &:last-child {
    border-bottom: none;
  }
}

.label {
  width: 180rpx;
  font-size: 28rpx;
  color: #333333;
}

.input {
  flex: 1;
  height: 100rpx;
  font-size: 28rpx;
}



.switch-item {
  padding: 20rpx 0;
}

.button-group {
  margin-top: 24rpx;
  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  
  .cancel-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 28rpx;
    background-color: #fff;
    color: #666;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
    
    &:active {
      background-color: #f5f5f5;
    }
  }
  
  .save-btn {
    flex: 1;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    font-size: 28rpx;
    background: linear-gradient(135deg, #ff9a9e, #ff6b6b);
    color: #fff;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
    
    &:active {
      opacity: 0.9;
      transform: scale(0.98);
    }
  }
}
</style>